<!-- 关注公众号 -->
<template>
  <view class="officialAccount" v-if="isShow">
    <view class="disFlx" :style="{ position, left, bottom, padding }">
      <view>
        <view class="fz-14 flexBox">
          <image src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/warning.png" style="width: 40rpx; height: 40rpx"></image>
          <text class="pl-4">温馨提示</text>
        </view>
        <view class="fz-12 color8 mt-10">
          <text v-if="shareType === 'View'">用户未关注公众号不能接收通知,请通知TA</text>
          <text v-else>关注公众号,及时接收通知信息</text>
        </view>
      </view>
      <button v-if="shareType === 'Popup'" type="none" class="btn" @click="openModal">关注</button>
      <button
        v-else="shareType === 'View'"
        type="none"
        class="btn"
        open-type="share"
        :id="ShareButtonId.SHARETENCENTCODE"
      >
        分享
      </button>
    </view>
    <TencentCode :popupShow="popupShow" @close="closeModal"></TencentCode>
  </view>
</template>

<script setup lang="ts">
  import { computed, type PropType, ref, type CSSProperties } from 'vue';
  import { propTypes } from '@/utils/propTypes';
  import TencentCode from './tencentCode.vue';
  import { ShareButtonId } from '@/enums/shareEnum';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { IsOfficialAccountEnum } from '@/enums/loginEnum';
  import { storeToRefs } from 'pinia';

  const useUser = useUserStoreWithOut();
  const { userInfo } = storeToRefs(useUser);

  const props = defineProps({
    position: String as PropType<CSSProperties['position']>,
    left: propTypes.string,
    bottom: propTypes.string,
    padding: propTypes.string.def('20rpx 30rpx'),
    shareType: {
      type: String as PropType<'Popup' | 'View'>,
      default: 'Popup',
    },
  });

  const isShow = computed(
    () =>
      props.shareType === 'View' || userInfo.value.isOfficialAccount !== IsOfficialAccountEnum.FOLLOWED,
  );

  // 打开和关闭关注公众号弹窗
  const popupShow = ref(false);
  function openModal() {
    popupShow.value = true;
  }
  function closeModal() {
    popupShow.value = false;
  }
</script>
<style lang="scss" scoped>
  .officialAccount {
    .disFlx {
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      height: 130rpx;
      background-color: #fff;
      .color8 {
        color: #808080;
      }

      .btn {
        background-color: #e9e3b5;
        color: #000;
        width: 140rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 28rpx;
        border-radius: 8rpx;
        box-sizing: border-box;
      }
    }
    .flexBox {
      display: flex;
      align-items: center;
    }
  }
</style>
